<template>
	<view class="toupiaodiaoyan-details bgcolor1 p-2 m-h100">
		<template v-if="toupiaoinfo">
			<view class="fs-32 ftcolor1 font-weight-bolder mb-2">投票内容：{{toupiaoinfo.info}}</view>
			<view class="fs-24 ftcolor1 flex ftcolor4 mb-2 justify-between">
				<text class="mr-2">投票类型：{{toupiaoinfo.choose_type===2?'单选':'多选'}}</text>
				<text>投票区域：{{toupiaoinfo.regions.name}}</text>
			</view>
			<view class="flex flex-column">
				<view class="flex align-center justify-between border rounded mb-2 p-2" v-for="(item,index) in touList"
					:key="index">
					<text>{{index + 1}}、{{item.title}}</text>
					<text class="fs-24 text-white py-1 rounded text-center" :class="item.checked?'bgcolor5':'bgcolor4'" style="width: 100rpx;"
						@click="vote(item)">{{item.checked?'已投票':'投票'}}</text>
				</view>
				<view class="text-white text-center py-1 rounded-circle mt-5 submit" :class="isdisabled?'bgcolor7':'bgcolor6'"
					@click="submit">确定</view>
			</view>
		</template>
		<noneBox v-else></noneBox>
	</view>
</template>

<script>
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				toupiaoinfo:null,
				touList: [{
						title: '张三',
						checked: false
					},
					{
						title: '张三',
						checked: false
					},
					{
						title: '张三',
						checked: false
					},
					{
						title: '张三',
						checked: false
					}
				],
				choose_item:[]
			}
		},
		computed:{
			isdisabled(){
				return this.touList.some(i => i.checked) && !this.choose_item.length
			}
		},
		created() {
			this.toupiaoinfo = uni.getStorageSync('toupiaoinfo')
			const loginfo = this.toupiaoinfo.member_ballot_log
			if(loginfo){
				this.choose_item = loginfo.choose_item
			}
			this.touList = this.toupiaoinfo.item.map(i => {
				return{
					title:i,
					checked:this.choose_item.includes(i)
				}
			})
		},
		methods: {
			submit(){
				if(!this.isdisabled)return
				const names = this.touList.filter(i => i.checked).map(i => i.title)
				serviceApi.ballot_act({ballot_main_id:this.toupiaoinfo.id,choose_item:names}).then(res => {
					uni.showToast({
						title:'投票成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					},2000)
				})
			},
			vote(item) {
				if(this.toupiaoinfo.member_ballot_log)return
				if(this.toupiaoinfo.choose_type ===  2){
					this.touList.forEach(i => {
						i.checked = false
					})
				}
				item.checked = !item.checked
			}
		}
	}
</script>

<style lang="scss">
	.toupiaodiaoyan-details {}
</style>